<template>
  <div class="main-pop">
    <a-row>
      <a-col :lg="24" :xl="24" :xxl="24">
        <div class="top-btns">
          <a-button type="primary" @click="savePartner"><a-icon type="save" />保存服务商</a-button>
          <a-button type="primary" @click="saveDraft"><a-icon type="save" />保存草稿</a-button>
          <a-button type="primary" @click="backList"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-form :form="form">
      <a-collapse class="form-wrap basic-form-pop" v-model="activeKey">
        <a-collapse-panel header="基本信息" key="1">
          <a-form-item label="*类型">
            <a-select v-model="params.bank_type" placeholder="请选择账户类型">
              <a-select-option :value="1">个人</a-select-option>
              <a-select-option :value="2">企业</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="*名称">
            <a-input v-model="params.partner_name" placeholder="请输入服务商名称" />
          </a-form-item>
          <a-form-item label="*手机号">
            <a-input v-model="params.phone" placeholder="请输入手机号" />
          </a-form-item>
          <a-form-item label="*身份证号">
            <a-input v-model="params.identity" placeholder="请输入身份证号" />
          </a-form-item>
          <a-form-item label="所属区域">
            <area-select :createPlace="params.basic_area" @handlePlace="selectArea" />
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel header="推荐人信息" key="2">
          <a-form-item label="*推荐人姓名">
            <a-input v-model="params.parent_partner_name" placeholder="请选择推荐人" />
          </a-form-item>
          <a-form-item label="*推荐人手机号">
            <a-input v-model="params.parent_partner_phone" disabled/>
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel header="证件信息" key="3" v-if="params.bank_type===2">
          <a-form-item label="营业执照名称">
            <a-input v-model="params.license_name" disabled/>
          </a-form-item>
          <a-form-item label="营业执照">
            <!-- <a-input v-model="params.license" disabled/> -->
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel header="结算信息" key="4">
          <a-form-item label="*账户类型：">
            <a-select v-model="params.account_type">
              <a-select-option :value="1">公户</a-select-option>
              <a-select-option :value="2">私户</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="*银行名称：">
            <a-select v-model="params.bankname">
              <a-select-option value="1">111</a-select-option>
              <a-select-option value="2">343</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="*银行账号：">
            <a-input v-model="params.bankcard" placeholder="请输入银行账号"/>
          </a-form-item>
          <a-form-item label="*银行支行名称：">
            <a-input v-model="params.branchname" placeholder="请输入开户银行支行"/>
          </a-form-item>
          <a-form-item label="*开户地区">
            <area-select
              :createPlace="params.branch_area"
              @handlePlace="selectBranchArea"
              :tiptxt="tiptxt"
            />
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel header="加盟信息" key="5">
          <a-form-item label="*加盟费：">
            <a-input v-model="params.participation" placeholder="请输入加盟费"/>
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'draftsEdit',
  props: {
    detailData: {
      type: Object,
      required: true,
      default: {}
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      activeKey: ['1', '2', '3', '4', '5'],
      tiptxt: '开户地区',
      params: {
        bank_type: this.detailData.type,
        partner_name: this.detailData.partner_name,
        phone: this.detailData.phone,
        identity: this.detailData.identity,
        basic_area: [this.detailData.province_id, this.detailData.city_id, this.detailData.district_id],
        province_id: this.detailData.province_id,
        city_id: this.detailData.city_id,
        district_id: this.detailData.district_id,
        parent_partner_name: this.detailData.parent_partner_name,
        parent_partner_phone: this.detailData.parent_partner_phone,
        license_name: this.detailData.license_name,
        license: this.detailData.license,
        account_type: this.detailData.account_type,
        bankname: this.detailData.bankname,
        bankcard: this.detailData.bankcard,
        branchname: this.detailData.branchname,
        branch_area: [this.detailData.bank_province_id, this.detailData.bank_city_id, this.detailData.bank_district_id],
        bank_province_id: this.detailData.bank_province_id,
        bank_city_id: this.detailData.bank_city_id,
        bank_district_id: this.detailData.bank_district_id,
        participation: this.detailData.participation,
      }
    }
  },
  computed: {
  },
  mounted() {
    console.log(this.detailData)
  },
  methods: {
    // 省市区
    selectArea({ area, provinceId, cityId, districtId }) {
      this.params.province_id = provinceId;
      this.params.city_id = cityId;
      this.params.district_id = districtId;
      this.params.basic_area = area
    },
    // 开户地区
    selectBranchArea({ area, provinceId, cityId, districtId }) {
      this.params.bank_province_id = provinceId;
      this.params.bank_city_id = cityId;
      this.params.bank_district_id = districtId;
      this.params.branch_area = area
    },
    // 保存服务商
    savePartner () {},
    // 保存服务商草稿箱
    saveDraft () {},
    backList() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
